<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="./vue.js"></script>
</head>
<body>
  <div id="app">
    <!-- tab切换 -->
    <!-- component是一个组件站位符 is属性是那个组件的名字 哪个组件就会展示到这来  -->
    <ul>
      <li><button @click="currentTabComponent='zs'">张三</button></li>
      <li><button @click="currentTabComponent='ls'">李四</button></li>
    </ul>
    <!-- 失活的组件将会被缓存！-->
    <keep-alive>
      <component v-bind:is="currentTabComponent"></component>
    </keep-alive>
  </div>
  <script>
    // <keep-alive> 包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们
      // 避免反复重渲染导致的性能问题
      
    // 定义组件
    Vue.component('zs', {
      template: `<h2>我是张三组件</h2>`,
      deactivated() {
        // 失活状态  这个组件被缓存起来但是目前没有被使用
        console.log('zs组件失活了')
      },
      activated() {
        // 激活状态 这个组件正在使用状态
        console.log('zs组件激活状态')
      }
    })
    Vue.component('ls', {
      template: `<h2>我是李四组件</h2>`
    })
    new Vue({
      el: document.querySelector('#app'), // el属性可以传递一个字符串也可以一个dom对象
      data: {
        currentTabComponent: 'zs'
      },
    })
  </script>
</body>
</html>
